import React, { useEffect } from 'react'
import * as echarts from 'echarts';
import 'echarts-gl';
import './earth.scss'
import image from '../../assets/image/data.png'
// import img from '../../assets/image/bgimage.png'
// https://www.makeapie.cn/asset/get/s/data-1571295640429-3Co5rpLX.png

function earth() {

  useEffect(() => {

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      // backgroundColor: '#000',
      globe: {
        baseTexture: image,
        shading: 'lambert',
        // environment: img,
        atmosphere: {
          show: true
        },
        light: {
          ambient: {
            intensity: 0.1
          },
          main: {
            intensity: 1.5
          }
        },
        viewControl: {
          autoRotate: true, // 是否自动旋转
          autoRotateSpeed: 7, /// 自转速度
          distance: 300,   // 初始时地球的距离，数值越大地球越小
          minDistance: 30,  // 最小距离
          maxDistance: 800
        },
      },
      series: []

    };

    option && myChart.setOption(option);
  })

  return (
    <div id='main' style={{ width: '500px', height: '500px' }}>earth</div>
  )
}

export default earth